<template>
  <div>
    <!-- 列表  -->
    <FilterTable
      ref="table"
      :fetchapi="fetchApi"
      :columns="columns"
      :params="fetchParams"
      :datakey="'rows'"
      :onColumnsChange="columns => (this.columns = columns)"
      :isSelectColumn="false"
      :onSyncTableData="syncTableFun"
    >
      <!-- 操作按钮-新增 -->
      <template v-if="type != 'read'" slot="controls">
        <el-button type="primary" @click="add">新增</el-button>
      </template>
    </FilterTable>

    <BaseDialog :visible.sync="addDtlsVisible" title="检查项目信息" :destroyOnClose="true">
      <addMaintainPDIDtls :vehicleTypeCode="vehicleTypeCode" @return="reqAddDtl" />
    </BaseDialog>
  </div>
</template>
<script>
// 引入请求地址
import { getDtlList, deleteDtlById } from '@/api/repair/otherBusiness/maintainPDI/index';
// 新增明细页面
import addMaintainPDIDtls from './addMaintainPDIDtls.vue';

export default {
  components: {
    addMaintainPDIDtls
  },
  // 获取申请单ID
  props: ['id', 'type', 'vehicleTypeCode'],
  data() {
    return {
      columns: this.createTableColumns(), // 表格数据
      fetchParams: { mainId: this.id }, // 表格参数
      fetchApi: getDtlList, // 表格接口
      addDtlsVisible: false // 新增弹框
    };
  },
  mounted() {},
  methods: {
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          sorter: true,
          width: 100,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: 100,
          hidden: this.type == 'read',
          render: (props, h) => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.deleteFun(props.row.id, props.row)}>
                  删除
                </el-button>
              </div>
            );
          }
        },

        {
          title: '检查项目代码',
          dataIndex: 'itemCode',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '检查项目名称',
          dataIndex: 'itemName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '检查标识',
          dataIndex: 'checkFlag',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '处理方式',
          dataIndex: 'dealWay',
          editable: !(this.type == 'read'),
          editType: 'input',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },

    /** 新增按钮触发方法 */
    add() {
      if (!this.vehicleTypeCode || this.vehicleTypeCode == '') {
        this.$notify({
          title: '提示信息',
          message: '车型为空，请选择委托书',
          type: 'waring'
        });
        return;
      }
      this.addDtlsVisible = true;
    },

    /** 对当前列表数据进行操作，参数costItem为当前列表所有数据 */
    syncTableFun(items) {
      this.$emit('itemClallback', items);
    },

    // 新增选中数据回调
    reqAddDtl(item) {
      if (item.length > 0) {
        // 赋值数据
        this.$refs.table.$refs.pageTable.EXECUTE_INSERT(item);
      }
      this.addDtlsVisible = false;
    },

    /** 删除方法 */
    deleteFun(id, item) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          if (id) {
            const res = await deleteDtlById(id);
            if (res.errMsg) {
              this.$notify({
                title: '错误信息',
                message: '删除失败',
                type: 'error'
              });
            } else {
              this.$notify({
                title: '提示信息',
                message: '删除成功',
                type: 'success'
              });
              this.$refs.table.$refs.pageTable.EXECUTE_DELETE([item]);
            }
          } else {
            this.$notify({
              title: '提示信息',
              message: '删除成功',
              type: 'success'
            });
            this.$refs.table.$refs.pageTable.EXECUTE_DELETE([item]);
          }
        })
        .catch(() => {
          this.$notify({
            title: '提示信息',
            message: '已取消删除',
            type: 'info'
          });
        });
    }
  }
};
</script>
